<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/amazeui/2.7.2/js/amazeui.min.js"></script>
<style type="text/css">
	.am-anima{
		width: 150px;
		height: 150px;
		line-height: 150px;
		text-align: center;
		background-color: #009688;
		cursor: pointer;
		color: #fff;
		margin: 30px;
		border-radius: 50%;
	}
</style>



<!-- 文档地址 http://amazeui.shopxo.net/css/animation/ -->
<ul style="list-style: none;padding: 1px;margin:0;display: flex;justify-content: space-around;flex-wrap: wrap;">
	<li>
		<div class="am-anima" data-anim='am-animation-fade'>淡入</div>
	</li>
	<li>
		<div class="am-anima" data-anim='am-animation-scale-up'>逐渐放大</div>
	</li>
	<li>
		<div class="am-anima" data-anim='am-animation-scale-down'>逐渐缩小</div>
	</li>
	<li>
		<div class="am-anima" data-anim='am-animation-slide-top'>顶部滑入</div>
	</li>
	<li>
		<div class="am-anima" data-anim='am-animation-slide-bottom'>底部滑入</div>
	</li>
	<li>
		<div class="am-anima" data-anim='am-animation-slide-left'>左侧滑入</div>
	</li>
	<li>
		<div class="am-anima" data-anim='am-animation-slide-right'>右侧滑入</div>
	</li>
	<li>
		<div class="am-anima" data-anim='am-animation-shake'>左右摇动</div>
	</li>
</ul>
<ul style="list-style: none;padding: 1px;margin:0;display: flex;justify-content: space-around;flex-wrap: wrap;">
	<li>
		<div class="am-anima am-animation-reverse" data-anim='am-animation-fade'>反向淡入</div>
	</li>
	<li>
		<div class="am-anima am-animation-reverse" data-anim='am-animation-scale-up'>反向逐渐放大</div>
	</li>
	<li>
		<div class="am-anima am-animation-reverse" data-anim='am-animation-scale-down'>反向逐渐缩小</div>
	</li>
	<li>
		<div class="am-anima am-animation-reverse" data-anim='am-animation-slide-top'>反向顶部滑入</div>
	</li>
	<li>
		<div class="am-anima am-animation-reverse" data-anim='am-animation-slide-bottom'>反向底部滑入</div>
	</li>
	<li>
		<div class="am-anima am-animation-reverse" data-anim='am-animation-slide-left'>反向左侧滑入</div>
	</li>
	<li>
		<div class="am-anima am-animation-reverse" data-anim='am-animation-slide-right'>反向右侧滑入</div>
	</li>
	<li>
		<div class="am-anima am-animation-reverse" data-anim='am-animation-shake'>反向左右摇动</div>
	</li>
</ul>


<script type="text/javascript">
	$('.am-anima').click(function(){
		var othis = $(this), anim = othis.data('anim');
		console.log(othis.parent().index());
		othis.removeClass(anim);
		setTimeout(function(){
			othis.addClass(anim);
		});
		setTimeout(function(){
			othis.removeClass(anim);
		}, 1300);
	})
</script>